<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上书店</title>
    <link href="css/MainPage.css" type="text/css"  rel="stylesheet"/>
    
   <script src="js/mainPage.js">

   </script>
</head>
<body>
  <div class="head">
    <a href="html/loginPage.html">登录</a>
     <a href="html/ebook.html">电子书</a>
     <a href="html/HelpPage.html">帮助中心</a>
    <a href="html/problem.html">常见问题</a>
</div>


      <div class="headDiv">
         <div>
           <p class="LogoText">
             <font>欢</font>
             <font>迎</font>
             <font>购</font>
             <font>书</font>
           </p>
        </div>
      </div>



      <div class="searchDiv">
          <input type="text" class="searchInput">
          <div class="searchBtn">
            <p class="searchText">搜索</p>
          </div>
          <a href="html/shoppingCart.html">
          <div class="buy"></div>
        </a>
      </div>

    <div class="mainDiv">
      <div class="mainContent">

        <div class="classify"> 
          <p class="headClassifyText">图书分类</p>
          <div class="literature">
            <p class="classifyText">文学</p>
            <a href="#" class="linkStyle">小说</a>
            <a href="#" class="linkStyle">科幻</a>
            <a href="#" class="linkStyle">散文</a>
            <a href="#" class="linkStyle">悬疑</a>
          </div>

          <div class="child">
              <p class="classifyText">童书</p>
              <a href="#" class="linkStyle">绘本</a>
              <a href="#" class="linkStyle">少儿英语</a>
              <a href="#" class="linkStyle">幼儿启蒙</a>
              <a href="#" class="linkStyle">动漫卡通</a>
          </div>

          <div class="encouagement">
            <p class="classifyText">励志</p>
            <a href="#" class="linkStyle">心灵鸡汤</a>
            <a href="#" class="linkStyle">社交</a>
            <a href="#" class="linkStyle">女性励志</a>
            <a href="#" class="linkStyle">口才</a>
          </div>

          <div class="art">
              <p class="classifyText">艺术</p>
              <a href="#" class="linkStyle">绘画</a>
              <a href="#" class="linkStyle">书法</a>
              <a href="#" class="linkStyle">摄影</a>
              <a href="#" class="linkStyle">音乐</a>
          </div>

          <div class="life">
              <p class="classifyText">生活</p>
              <a href="#" class="linkStyle">美食</a>
              <a href="#" class="linkStyle">美妆</a>
              <a href="#" class="linkStyle">体育</a>
              <a href="#" class="linkStyle">家居</a>
          </div>
          <div class="allClassify">
              <a class="allClassifyText" href="#">全部图书分类</a>
          </div>
        </div>

        <div class="banner">
          <ul class="banner_pic" id="banner_pic">
            <li class="current"><img class="one" src="images/img01.jpg"/></li>
            <li class="pic"><img class="one" src="images/img02.jpg"/></li>
            <li class="pic"><img class="one" src="images/img03.jpg"/></li>
        </ul>
        <ol id="button">
            <li class="current"></li>
            <li class="but"></li>
            <li class="but"></li>
        </ol>
        </div>

        <div class="hotspt">
            <p class="hotText">-- 头条快报 --</p>
            <a href="#" class="hotLink">~文学小说 每满100减去50</a>
            <a href="#" class="hotLink">~教育培训 每满300减去40</a>
            <a href="#" class="hotLink">~万种童书 每满100减去50</a>
            <a href="#" class="hotLink">~精选好书 每满99减去50</a>
        </div>

        <div class="handpik">
           <div class="handpikbox">
             <p class="handpikClassifyText"><em>精选</em> 好书</p>
             <ul class="hankpikUl">
               <li id="handpik1" class="liStyle" >
                 <p >文学</p>
                 <div  class="handBookBox">
                   <div class="handBook1">
                     <a href="html/BookInfo.html" target="_blank" class="bookLink"><img src="images/book1.jpg" alt="">
                      <span>中世纪的英雄与奇观</span>
                    </a>
                   </div>
                   <div class="handBook">
                    <a href="html/BookInfo2.html" target="_blank" class="bookLink"><img src="images/book2.jpg" alt="">
                      <span>巴黎记</span>
                    </a>
                   </div>
                   <div class="handBook">
                     <a href="html/BookInfo3.html" target="_blank" class="bookLink"><img src="images/book3.jpg" alt="">
                      <span>私恋失调</span>
                    </a>
                   </div>
                   <div class="handBook">
                      <a href="#" class="bookLink"><img src="images/book4.jpg" alt="">
                      <span>长物记</span>
                    </a>
                   </div>
                   <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book5.jpg" alt="">
                      <span>人间词话</span>
                    </a>
                   </div>
                 </div>
                </li>
               <li class="liStyle" >
                <p >少儿</p>
                 <div  class="handBookBox">
                   <div class="handBook1">
                     <a href="#" class="bookLink"><img src="images/book2_1.jpg" alt="">
                      <span>口袋神探</span>
                    </a>
                   </div>
                   <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book2_2.jpg" alt="">
                      <span>收拾房间</span>
                    </a>
                   </div>
                   <div class="handBook">
                     <a href="#" class="bookLink"><img src="images/book2_3.jpg" alt="">
                      <span>劳拉陪我一起练</span>
                    </a>
                   </div>
                   <div class="handBook">
                      <a href="#" class="bookLink"><img src="images/book2_4.jpg" alt="">
                      <span>这飞机</span>
                    </a>
                   </div>
                   <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book2_5.jpg" alt="">
                      <span>装啊装</span>
                    </a>
                   </div>
                 </div>
               </li>
               <li class="liStyle">
                <p >励志</p>
                <div class="handBookBox">
                  <div class="handBook1">
                    <a href="#" class="bookLink"><img src="images/book3_1.jpg" alt="">
                     <span>超高效时间管理</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book3_2.jpg" alt="">
                     <span>专注力的技术</span>
                   </a>
                  </div>
                  <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book3_3.jpg" alt="">
                     <span>掌控习惯</span>
                   </a>
                  </div>
                  <div class="handBook">
                     <a href="#" class="bookLink"><img src="images/book3_4.jpg" alt="">
                     <span>人生护城河</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book3_5.jpg" alt="">
                     <span>另类独行</span>
                   </a>
                  </div>
                </div>
               </li>
               <li class="liStyle">
                <p >艺术</p>
                <div class="handBookBox">
                  <div class="handBook1">
                    <a href="#" class="bookLink"><img src="images/book4_1.jpg" alt="">
                     <span>质感</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book4_2.jpg" alt="">
                     <span>红勒1994</span>
                   </a>
                  </div>
                  <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book4_3.jpg" alt="">
                     <span>玩猫日记</span>
                   </a>
                  </div>
                  <div class="handBook">
                     <a href="#" class="bookLink"><img src="images/book4_4.jpg" alt="">
                     <span>卢浮宫艺术课</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book4_5.jpg" alt="">
                     <span>油画棒</span>
                   </a>
                  </div>
                </div>
               </li>
               <li class="liStyle">
                <p >生活</p>
                <div class="handBookBox">
                  <div class="handBook1">
                    <a href="#" class="bookLink"><img src="images/book5_1.jpg" alt="">
                     <span>怀孕圣经</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book5_2.jpg" alt="">
                     <span>正面管教</span>
                   </a>
                  </div>
                  <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book5_3.jpg" alt="">
                     <span>失眠治愈</span>
                   </a>
                  </div>
                  <div class="handBook">
                     <a href="#" class="bookLink"><img src="images/book5_4.jpg" alt="">
                     <span>窥视印度</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book5_5.jpg" alt="">
                     <span>护肤全书</span>
                   </a>
                  </div>
                </div>
               </li>
             </ul>
             
           </div>
        </div>

        <div class="newBook">
          <div class="handpikbox">
            <p class="handpikClassifyText"><em>新书</em> 上架</p>
            <ul class="hankpikUl">
              <li id="newBook1" class="liStyle" >
                <p >热卖</p>
                <div  class="handBookBox">
                  <div class="handBook1">
                    <a href="#" class="bookLink"><img src="images/book2_1.jpg" alt="">
                     <span>口袋神探</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book2_2.jpg" alt="">
                     <span>收拾房间</span>
                   </a>
                  </div>
                  <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book2_3.jpg" alt="">
                     <span>劳拉陪我一起练</span>
                   </a>
                  </div>
                  <div class="handBook">
                     <a href="#" class="bookLink"><img src="images/book2_4.jpg" alt="">
                     <span>这飞机</span>
                   </a>
                  </div>
                  <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book2_5.jpg" alt="">
                     <span>装啊装</span>
                   </a>
                  </div>
                </div>
               </li>
              <li class="liStyle" >
               <p >独家</p>
               <div  class="handBookBox">
                <div class="handBook1">
                  <a href="#" class="bookLink"><img src="images/book1.jpg" alt="">
                   <span>中世纪的英雄与奇观</span>
                 </a>
                </div>
                <div class="handBook">
                 <a href="#" class="bookLink"><img src="images/book2.jpg" alt="">
                   <span>巴黎记</span>
                 </a>
                </div>
                <div class="handBook">
                  <a href="#" class="bookLink"><img src="images/book3.jpg" alt="">
                   <span>私恋失调</span>
                 </a>
                </div>
                <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book4.jpg" alt="">
                   <span>长物记</span>
                 </a>
                </div>
                <div class="handBook">
                 <a href="#" class="bookLink"><img src="images/book5.jpg" alt="">
                   <span>人间词话</span>
                 </a>
                </div>
              </div>
              </li>
              <li class="liStyle">
               <p >励志</p>
               <div class="handBookBox">
                 <div class="handBook1">
                   <a href="#" class="bookLink"><img src="images/book3_1.jpg" alt="">
                    <span>超高效时间管理</span>
                  </a>
                 </div>
                 <div class="handBook">
                  <a href="#" class="bookLink"><img src="images/book3_2.jpg" alt="">
                    <span>专注力的技术</span>
                  </a>
                 </div>
                 <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book3_3.jpg" alt="">
                    <span>掌控习惯</span>
                  </a>
                 </div>
                 <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book3_4.jpg" alt="">
                    <span>人生护城河</span>
                  </a>
                 </div>
                 <div class="handBook">
                  <a href="#" class="bookLink"><img src="images/book3_5.jpg" alt="">
                    <span>另类独行</span>
                  </a>
                 </div>
               </div>
              </li>
              <li class="liStyle">
               <p >艺术</p>
               <div class="handBookBox">
                 <div class="handBook1">
                   <a href="#" class="bookLink"><img src="images/book4_1.jpg" alt="">
                    <span>质感</span>
                  </a>
                 </div>
                 <div class="handBook">
                  <a href="#" class="bookLink"><img src="images/book4_2.jpg" alt="">
                    <span>红勒1994</span>
                  </a>
                 </div>
                 <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book4_3.jpg" alt="">
                    <span>玩猫日记</span>
                  </a>
                 </div>
                 <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book4_4.jpg" alt="">
                    <span>卢浮宫艺术课</span>
                  </a>
                 </div>
                 <div class="handBook">
                  <a href="#" class="bookLink"><img src="images/book4_5.jpg" alt="">
                    <span>油画棒</span>
                  </a>
                 </div>
               </div>
              </li>
              <li class="liStyle">
               <p >生活</p>
               <div class="handBookBox">
                 <div class="handBook1">
                   <a href="#" class="bookLink"><img src="images/book5_1.jpg" alt="">
                    <span>怀孕圣经</span>
                  </a>
                 </div>
                 <div class="handBook">
                  <a href="#" class="bookLink"><img src="images/book5_2.jpg" alt="">
                    <span>正面管教</span>
                  </a>
                 </div>
                 <div class="handBook">
                   <a href="#" class="bookLink"><img src="images/book5_3.jpg" alt="">
                    <span>失眠治愈</span>
                  </a>
                 </div>
                 <div class="handBook">
                    <a href="#" class="bookLink"><img src="images/book5_4.jpg" alt="">
                    <span>窥视印度</span>
                  </a>
                 </div>
                 <div class="handBook">
                  <a href="#" class="bookLink"><img src="images/book5_5.jpg" alt="">
                    <span>护肤全书</span>
                  </a>
                 </div>
               </div>
              </li>
            </ul>
            
          </div>
        </div>

      </div>
      <div class="Promotion">
        <div class="yuanban">      
          <a href="#" class="promotionImg"></a>
          <div class="box1">
            <a href="#">
              <img src="images/Ybook1.jpg" alt="">
              <span>my flar RDJF</span>
            </a>
            <a href="#">
              <img src="images/Ybook2.jpg" alt="">
              <span style="font-size: 14px;">Word Power Made Easy</span>
            </a>
            <a href="#">
              <img src="images/Ybook3.jpg" alt="">
              <span>MICHELLE</span>
            </a>
            <a href="#">
              <img src="images/Ybook4.jpg" alt="">
              <span>小猪佩奇</span>
            </a>
            <a href="#">
              <img src="images/Ybook5.jpg" alt="">
              <span>HOBBIT</span>
            </a>
          </div>
          <div class="box2">
            <a href="#">
              <img src="images/Ybook6.jpg" alt="">
              <span>伟大的柯布西耶</span>
            </a>
            <a href="#">
              <img src="images/Ybook7.jpg" alt="">
              <span>铁军团队</span>
            </a>
            <a href="#">
              <img src="images/Ybook8.jpg" alt="">
              <span>复利信徒</span>
            </a>
            <a href="#">
              <img src="images/Ybook9.jpg" alt="">
              <span>福尔摩斯</span>
            </a>
            <a href="#">
              <img src="images/itbook10.jpg" alt="">
              <span>深度学习</span>
            </a>
          </div>
        </div>
        <div class="recommend">
          <a href="#" class="promotionImg2"></a>
          <div class="box1">
            <a href="#">
              <img src="images/itbook1" alt="">
              <span>动物简史</span>
            </a>
            <a href="#">
              <img src="images/itbook2.jpg" alt="">
              <span>有趣的数学</span>
            </a>
            <a href="#">
              <img src="images/itbook3.jpg" alt="">
              <span>人类简史</span>
            </a>
            <a href="#">
              <img src="images/itbook4.jpg" alt="">
              <span>爆炸医学史</span>
            </a>
            <a href="#">
              <img src="images/itbook5.jpg" alt="">
              <span>office入门到精通</span>
            </a>
          </div>
          <div class="box2">
            <a href="#">
              <img src="images/itbook6.jpg" alt="">
              <span>推荐系统算法实践</span>
            </a>
            <a href="#">
              <img src="images/itbook7.jpg" alt="">
              <span>人工智能</span>
            </a>
            <a href="#">
              <img src="images/itbook8.jpg" alt="">
              <span>区块链</span>
            </a>
            <a href="#">
              <img src="images/itbook9.jpg" alt="">
              <span>机械学习</span>
            </a>
            <a href="#">
              <img src="images/itbook10.jpg" alt="">
              <span>深度学习</span>
            </a>
          </div>
        </div>
      </div>
  </div>
  <div class="tail">
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
    <a href="#">联系客服</a>
    <a href="#">合作招商</a>
  </div>
</body>
</html>